<template>
	<view>
		<!-- navbar -->
		<van-nav-bar title="我的" :border="false" title-class="custom-navbar-title" />
		<scroll-view @refresherrefresh="handleRefresh" refresher-enabled
			:refresher-triggered="trigger" scroll-y :style="{height: height, backgroundColor: '#f8f8f8'}">
			<!-- profile -->
			<view class="me-profile">
				<van-image round width="100rpx" height="100rpx" :src="userInfo.avatar" lazy-load/>
				<view class="me-profile-info">
					<text class="me-profile-info-name">{{userInfo.nickName}}</text>
					<text class="me-profile-info-phone" v-if="userInfo.phone">{{userInfo.phone}}</text>
					<van-button style="margin-top: 12rpx;" v-else size="small" open-type="getPhoneNumber" @getphonenumber="getPhone">获取手机号</van-button>
				</view>
				<van-tag plain type="primary" color="#000000" size="medium">Lv{{userInfo.vipLevel || 0}}</van-tag>
			</view>
			<!-- card -->
			<view class="me-card">
				<!-- money -->
				<view class="me-card-l" @tap="toPage({url: '/pages/home/chargeCenter'})">
					<view class="me-card-l-item">
						<text class="me-card-title">钱包</text>
						<text class="me-card-num">{{userInfo.balance || '0.00'}}</text>
					</view>
					<van-icon name="card" size="88rpx" color="#8887ed" custom-class="me-card-icon"/>
				</view>
				<!-- score -->
				<view class="me-card-r" @tap="toPage({url: '/pages/home/chargeCenter'})">
					<view class="me-card-r-item">
						<text class="me-card-title">积分</text>
						<text class="me-card-num">{{userInfo.points || '0'}}</text>
					</view>
					<van-icon name="diamond" size="88rpx" color="#82d878" custom-class="me-card-icon"/>
				</view>
			</view>
			<!-- item -->
			<van-cell-group :border="false">
			  <van-cell @click="toPage(item)" title-class="me-title-class" :title="item.title" :icon="item.icon" :border="index != (itemList.length-1)" size="large" is-link v-for="(item, index) in itemList" :key="index"/>
			</van-cell-group>
			<!-- company -->
			<view style="height: 36rpx;"></view>
			<view style="padding: 0 32rpx;">
				<van-divider contentPosition="center">重庆九翕提供技术支持</van-divider>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {mapState, mapActions} from 'vuex';
	import {getPhone, getRealInfo} from '../../api/home/index.js';
	export default {
		name: 'Me',
		data() {
			return {
				// itemList
				itemList: [
					{title: '我的订单', icon: 'label', url: '/pages/me/myOrders'},
					// {title: '我的预约', icon: 'todo-list', url: ''},<van-icon name="bookmark" />
					{title: '优惠券', icon: 'column', url: '/pages/me/coupon'},
					{title: '存取酒', icon: 'bookmark', url: '/pages/me/accessWine'},
					{title: '在线客服', icon: 'service', url: ''},
				],
				trigger: false
			}
		},
		computed: {
			...mapState(['userInfo']),
			height() {
				return this.scrollviewHeilght - 96 + 'px'
			}
		},
		methods: {
			...mapActions(['setUserInfo']),
			// 自定义下拉刷新被触发
			handleRefresh() {
				this.trigger = true;
				getRealInfo().then(res => {
					const {data: userInfo} = res;
					this.setUserInfo({userInfo});
				}).finally(() => {
					this.trigger = false;
				})
			},
			toPage({url}) {
				if(url) {
					this.$slNavigateTo(url);
				}
			},
			getPhone({detail}) {
				const that = this;
				let {errMsg, encryptedData, iv} = detail;
				if(errMsg === 'getPhoneNumber:ok') {
					uni.login({
						provider: 'weixin',
						success(e) {
							let {
								code,
								errMsg: errMsg1
							} = e;
							if (errMsg1 = 'login:ok') {
								getPhone({code, encryptedData, iv}).then(res => {
									const {data: userInfo} = res;
									that.setUserInfo({userInfo});
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.me-card-icon {
		position: absolute !important;
		bottom: 32rpx !important;
		right: 32rpx !important;
	}
	.me-title-class {
		font-weight: bold !important;
		font-size: 32rpx !important;
		padding-left: 16rpx !important;
	}
	.van-cell__left-icon-wrap {
		font-size: 48rpx !important;
		color: #000000 !important;
		font-weight: bold !important;
	}
	.van-cell__right-icon-wrap {
		font-size: 42rpx !important;
	}
</style>

<style lang="scss" scoped>
	.me-profile {
		padding: 16rpx 48rpx 16rpx 32rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		.me-profile-info {
			padding-left: 32rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.me-profile-info-name {
				font-size: 32rpx;
				color: #000000;
				font-weight: bold;
			}
			.me-profile-info-phone {
				color: #999999;
			}
		}
	}
	
	.me-card {
		background-color: #fff;
		padding: 32rpx;
		height: 180rpx;
		display: flex;
		font-weight: bold;
		.me-card-l, .me-card-r {
			position: relative;
			flex: 1;
			overflow: hidden;
			border-radius: 16rpx;
		}
		.me-card-l .me-card-l-item , .me-card-r .me-card-r-item {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 32rpx;
		}
		.me-card-l {
			margin-right: 32rpx;
			background-color: #ecedfd;
		}
		.me-card-r {
			background-color: #e0fdef;
		}
		.me-card-title {
			color: #333333;
		}
		.me-card-num {
			padding-top: 12rpx;
			color: #000000;
			font-size: 40rpx;
		}
		.me-card-sub-title1 {
			color: #82d878;
		}
	}
</style>